<template>
	<div>
			<div class="content">
				<div class="con-left"> 
					<ul>
						<!-- ind 是实参 所用的这个就是遍历goods 所获得的ind 这里三个要一致才可以   v 表示整行都可以用 所有$event可以直接换成V 更加简便 下面就可以直接调用v -->
						<li v-on:click="solrt(v,ind)" v-for="(v,ind) in goods" :class="ind==index?'active':''">{{v}}</li>
					</ul>
				</div>
				<div class="con-right">
					<div class="rightC">
						<p>
							全部分类
						</p>
						<p>
							综合排序
						</p>
					</div>
					<div class="right-content">
						<div v-for="l in list.data" class="right-fl">
							<div class="right-flA">
								<img :src="l.img" alt="">
							</div>
							<div class="right-flB">
								<p>{{l.name}}</p>
								<p v-if="l.pm_desc"><span>精选</span><span>{{l.pm_desc}}</span></p>
								<p>{{l.specifics}}</p>
								<p><span>{{l.price}}</span><span>{{l.market_price}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
	    </div>
</template>
<script type="text/javascript">
	export default({
		components:{

		},
		data(){
			return {
				list:[],
				index:0,
				goods:["热销榜","牛奶面包","优选水果","天天特价"]
			}	
		},
		methods:{
			request(sort){
				this.$http({
					url:"http://h5.yztctech.net/api/axf/apicategory.php",
					method:"get",
					params:{
						category:sort||'热销榜'
					}
				}).then(function(res){
					this.list=JSON.parse(res.body)
				})
			},
			solrt(v,i){
				this.request(v);
				this.index=i;
			}

		},
		mounted(){
			this.request();
		}
	})
</script>
<style type="text/css">
	.content{
				width: 100%;
    			display: flex;
    			font-size: .3rem;

    		}
    		.con-left{
    			position: fixed;
    			margin-top: 1.5rem;
    			font-size: .35rem;
    			width: 25%;
    			height: 11.5rem;
    			overflow-y: scroll;
    		}
    		.con-left>ul{
    			width: 100%;
    			display: flex;
    			flex-direction: column;
    			align-items: center;
    			justify-content: center;
    		}
    		.con-left>ul>li{
    			padding-top: .25rem;
    			padding-bottom: .25rem;
    			border-bottom: .01rem solid #ccc;
    		}
    		.con-right{
    			margin-left: 25%;
    			margin-top: 1.5rem;
    			width: 75%;
    			overflow-y: scroll;
    			
    		}
    		.rightC{
    			width:75%;
    			height: 1.3rem;
    			background: red;
    			position: fixed;
    			right: 0;
    			display: flex;
    			align-items: center;
    		}
    		.rightC>p{
				width: 50%;
				text-align: center;
    		}
    		.right-content{
    			width: 100%;
    			margin-top: 1.3rem;
    		}
    		.right-fl{
    			display: flex;
    		}
    		.right-flA{
    			width: 40%;
    		}
    		.right-flA>img{
    			width: 100%;
    		}
    		.right-flB{
				width: 60%;
    		}
    		.active::before{
				content: "";
				color: #ffd600;
				position: absolute;
				width: 0;
				height: .5rem;
				left: 0;
				border-left: .1rem solid;
    		}
    			
    			.liu{
   					 font-family:"iconfont" !important;
    					font-size:16px;font-style:normal;
   					}
</style>